// permission.js专门处理路由权限
// 使用导航守卫实现
// 引入路由实例
import router from '@/router'
// 引入vuex的store实例
import store from '@/store'
// 引入进度条插件
import NProgress from 'nprogress'
// 引入进度条样式
import 'nprogress/nprogress.css'

// 定义白名单（不受权限控制的页面）
const whiteList = ['/login', '/404']
// 路由前置守卫
router.beforeEach(async(to, from, next) => {
  // 开启进度条
  NProgress.start()
  // 判断有无token
  if (store.getters.token) {
    // 有token，就判断是否去登录页面
    if (to.path === '/login') {
      // 如果去的是登录页面，因为检测到有token，说明已经登录，直接跳到首页
      next('/')
    } else {
      // 如果不是去登录页面且有token，直接放行
      // 有token的情况下，通过判断有无userId来判断是否有获取用户资料
      // 没有获取用户资料，调用user模块的actions中获取用户资料的方法
      if (!store.getters.userId) {
        // 使用await，等数据获取完毕再执行next()
        const { roles } = await store.dispatch('user/getUserInfo')
        // actions是做异步操作的，所以必须用await
        const routes = await store.dispatch('permission/filterRoutes', roles.menus)
        console.log(routes)
        // routes就是筛选得到的动态路由
        // 使用addRoutes将动态路由添加到路由表中
        // 如果不将静态路由中的404放到动态路由的最后，那么就算用户有权限，每次刷新都会显示404
        // 将404放到动态路由的最后
        router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }])
        // 添加完动态路由后，进行跳转，相当于多做一次跳转
        next(to.path)
      } else {
        next()
      }
    }
  } else {
  // 没有token的情况
    if (whiteList.indexOf(to.path) > -1) {
    // 如果去的页面在白名单中（登录页面或404页面），放行
      next()
    } else {
    // 不在白名单，跳到登录页
      next('/login')
    }
  }
  // 手动强制关闭一次进度条，解决手动切换地址时进度条不关闭的问题
  NProgress.done()
})
// 后置守卫
router.afterEach(route => {
  // 关闭进度条
  NProgress.done()
})
